<template>
  <div class="app-container">
    <div class="custom_card_0">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
        size="small"
      >
        <el-form-item label="车牌号" prop="carLicenceNum">
          <el-input
            v-model="queryParams.carLicenceNum"
            placeholder="请输入车牌号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="订单号" prop="orderEncryptId">
          <el-input
            v-model="queryParams.orderEncryptId"
            placeholder="请输入订单号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="工单时间">
          <el-date-picker
            v-model="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTime"
            >></el-date-picker
          >
        </el-form-item>
        <el-form-item label="工单类型" prop="workOrderType">
          <el-select
            v-model="queryParams.workOrderType"
            placeholder="请选择工单类型"
            clearable
          >
            <el-option label="库存占用" :value="1" />
            <el-option label="库存释放" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="工单状态" prop="workOrderStatus">
          <el-select
            v-model="queryParams.workOrderStatus"
            placeholder="请选择工单状态"
            clearable
          >
            <el-option label="待执行" :value="0" />
            <el-option label="已执行" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['ota:Inventory:occupancy']"
          class="first-plain-btn"
          size="medium"
          @click="handleInventory(1)"
          >库存占用</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['ota:Inventory:release']"
          class="sec-plain-btn"
          size="medium"
          @click="handleInventory(2)"
          >库存释放</el-button
        >
      </el-col>
      <el-row type="flex" justify="end">
        <div class="rightBox" v-hasPermi="['ota:auto:Inventory']">
          <span style="font-size: 13px">自动占用/释放库存</span>
          <el-tooltip placement="right-start">
            <div slot="content" style="font-size: 14px">
              使用须知：<br />
              1、开启OTA订单同步功能后，启用库存同步功能即可根据<br />OTA平台订单对其他平台车辆进行自动库存占用及释放。<br />若仅需自动同步部分车型库存，可点击【车型配置】选择车型<br />
              2、客户对本平台订单排车或获取到OTA平台订单已排车<br />将自动占用其他平台车辆库存。续租后将自动新增库存占用<br />
              3、客户取消订单后，自动释放各个平台库存<br />
              4、为客户重新排车后，将自动释放上一车辆库存，占用重新排车的车辆库存<br />
              5、提前还车则释放车辆原库存占用，新增整备时间库存占用<br />
              6、建议在本平台录入所有车辆<br />
              注：自动同步库存目前支持订单排车、取消订单、重新排车、<br />车辆续租、提前还车五种场景，逾期还车等场景暂不支持
            </div>
            <el-button type="text" size="mini"
              >&nbsp;<i class="el-icon-warning-outline"></i
            ></el-button>
          </el-tooltip>
          <el-switch
            style="margin-right: 10px"
            v-model="otaAutoCarSync"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="switchChange"
          >
          </el-switch>
          <!--          <el-button  size="small" type="text" @click="showCar=true">车型配置</el-button>-->
        </div>
      </el-row>
    </el-row>
    <div class="custom_card_0">
      <el-table
        v-loading="loading"
        :data="basicList"
        stripe
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        border
      >
        <template slot="empty">
          <el-empty :image-size="50" description="暂无工单"></el-empty>
        </template>
        <el-table-column
          type="index"
          label="序号"
          align="center"
          min-width="130"
        >
        </el-table-column>
        <el-table-column
          label="工单类型"
          align="center"
          prop="account"
          min-width="130"
        >
          <template v-slot="{ row }">
            {{ row.workOrderType | workOrderType }}
          </template>
        </el-table-column>
        <el-table-column
          label="工单状态"
          align="center"
          prop="account"
          min-width="130"
        >
          <template v-slot="{ row }">
            {{ row.workOrderStatus | workOrderStatus }}
          </template>
        </el-table-column>
        <el-table-column
          label="占用/释放时间"
          align="center"
          prop="password"
          min-width="130"
        >
          <template v-slot="{ row }">
            {{ row.carUsageStartTime }}~{{ row.carUsageEndTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="车牌号"
          align="center"
          min-width="130"
          prop="carLicenceNum"
        />
        <el-table-column label="关联订单" align="center" min-width="130">
          <template v-slot="{ row }">
            {{ row.orderEncryptId | filterNull }}
          </template>
        </el-table-column>
        <el-table-column
          label="携程"
          align="center"
          min-width="160"
          v-if="otaAccountMap.xc == 1"
        >
          <template v-slot="{ row }">
            <div v-if="row.statusMap.xc">
              <span
                v-if="statusFlag(row.statusMap.xc.status)"
                style="color: red"
                >{{
                  statusType(row.workOrderType, row.statusMap.xc.status)
                }}</span
              >
              <span v-if="!statusFlag(row.statusMap.xc.status)">{{
                statusType(row.workOrderType, row.statusMap.xc.status)
              }}</span>
              <el-popover placement="right" width="auto" trigger="hover">
                <div>
                  <p>{{ row.statusMap.xc.carUsageTime }}</p>
                </div>
                <el-button slot="reference" type="text" size="mini"
                  >&nbsp;<i class="el-icon-warning-outline"></i
                ></el-button> </el-popover
              ><!--<br/>
               <span v-if="statusFlag(row.statusMap.xc.status)"style="color: red;">失败原因:{{
                   row.statusMap.xc.status |
                     otaOrderStatus}}</span>-->
            </div>

            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          label="飞猪"
          align="center"
          min-width="160"
          v-if="otaAccountMap.fz == 1"
        >
          <template v-slot="{ row }">
            <div v-if="row.statusMap.fz">
              <span
                v-if="statusFlag(row.statusMap.fz.status)"
                style="color: red"
              >
                {{
                  statusType(row.workOrderType, row.statusMap.fz.status)
                }}</span
              >
              <span v-if="!statusFlag(row.statusMap.fz.status)">
                {{
                  statusType(row.workOrderType, row.statusMap.fz.status)
                }}</span
              >
              <el-popover placement="right" width="auto" trigger="hover">
                <div>
                  <p>{{ row.statusMap.fz.carUsageTime }}</p>
                </div>
                <el-button slot="reference" type="text" size="mini"
                  >&nbsp;<i class="el-icon-warning-outline"></i
                ></el-button> </el-popover
              ><!--<br/>
              <span v-if="statusFlag(row.statusMap.fz.status)"style="color: red;">失败原因:{{
                  row.statusMap.fz.status |
                      otaOrderStatus}}</span>-->
            </div>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          label="凹凸"
          align="center"
          min-width="160"
          v-if="otaAccountMap.at == 1"
        >
          <template v-slot="{ row }">
            <div v-if="row.statusMap.at">
              <span
                v-if="statusFlag(row.statusMap.at.status)"
                style="color: red"
              >
                {{
                  statusType(row.workOrderType, row.statusMap.at.status)
                }}</span
              >
              <span v-if="!statusFlag(row.statusMap.at.status)">
                {{
                  statusType(row.workOrderType, row.statusMap.at.status)
                }}</span
              >
              <el-popover placement="right" width="auto" trigger="hover">
                <div>
                  <p>{{ row.statusMap.at.carUsageTime }}</p>
                </div>
                <el-button slot="reference" type="text" size="mini"
                  >&nbsp;<i class="el-icon-warning-outline"></i
                ></el-button> </el-popover
              ><!--<br/>
              <span v-if="statusFlag(row.statusMap.at.status)"style="color: red;">失败原因:{{
                  row.statusMap.at.status |
                      otaOrderStatus}}</span>-->
            </div>

            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          label="哈啰"
          align="center"
          min-width="160"
          v-if="otaAccountMap.hl == 1"
        >
          <template v-slot="{ row }">
            <div v-if="row.statusMap.hl">
              <span
                v-if="statusFlag(row.statusMap.hl.status)"
                style="color: red"
                >{{
                  statusType(row.workOrderType, row.statusMap.hl.status)
                }}</span
              >
              <span v-if="!statusFlag(row.statusMap.hl.status)">{{
                statusType(row.workOrderType, row.statusMap.hl.status)
              }}</span>
              <el-popover placement="right" width="auto" trigger="hover">
                <div>
                  <p>{{ row.statusMap.hl.carUsageTime }}</p>
                </div>
                <el-button slot="reference" type="text" size="mini"
                  >&nbsp;<i class="el-icon-warning-outline"></i
                ></el-button> </el-popover
              ><!--<br/>
              <span v-if="statusFlag(row.statusMap.hl.status)"style="color: red;">失败原因:{{
                  row.statusMap.hl.status |
                      otaOrderStatus}}</span>-->
            </div>

            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          label="悟空"
          align="center"
          min-width="160"
          v-if="otaAccountMap.wk == 1"
        >
          <template v-slot="{ row }">
            <div v-if="row.statusMap.wk">
              <span
                v-if="statusFlag(row.statusMap.wk.status)"
                style="color: red"
                >{{
                  statusType(row.workOrderType, row.statusMap.wk.status)
                }}</span
              >
              <span v-if="!statusFlag(row.statusMap.wk.status)">{{
                statusType(row.workOrderType, row.statusMap.wk.status)
              }}</span>
              <el-popover placement="right" width="auto" trigger="hover">
                <div>
                  <p>{{ row.statusMap.wk.carUsageTime }}</p>
                </div>
                <el-button slot="reference" type="text" size="mini"
                  >&nbsp;<i class="el-icon-warning-outline"></i
                ></el-button> </el-popover
              ><!--<br/>
              <span v-if="statusFlag(row.statusMap.wk.status)"style="color: red;">失败原因:{{
                  row.statusMap.wk.status |
                      otaOrderStatus}}</span>-->
            </div>

            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          label="租租车"
          align="center"
          min-width="160"
          v-if="otaAccountMap.zzc == 1"
        >
          <template v-slot="{ row }">
            <div v-if="row.statusMap.zzc">
              <span
                v-if="statusFlag(row.statusMap.zzc.status)"
                style="color: red"
                >{{
                  statusType(row.workOrderType, row.statusMap.zzc.status)
                }}</span
              >
              <span v-if="!statusFlag(row.statusMap.zzc.status)">{{
                statusType(row.workOrderType, row.statusMap.zzc.status)
              }}</span>
              <el-popover placement="right" width="auto" trigger="hover">
                <div>
                  <p>{{ row.statusMap.zzc.carUsageTime }}</p>
                </div>
                <el-button slot="reference" type="text" size="mini"
                  >&nbsp;<i class="el-icon-warning-outline"></i
                ></el-button> </el-popover
              ><!--<br/>
              <span v-if="statusFlag(row.statusMap.zzc.status)" style="color: red;">失败原因:{{
                  row.statusMap.zzc.status |
                      otaOrderStatus}}</span>-->
            </div>

            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="操作时间" align="center" min-width="130">
          <template v-slot="{ row }">
            {{ row.createTime | filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="账号" align="center" min-width="130">
          <template v-slot="{ row }">
            {{ row.createByName | filterNull }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="200"
          fixed="left"
        >
          <template v-slot="{ row }">
            <el-button
              v-if="row.releaseStatus === 1"
              type="text"
              size="mini"
              @click="handleQuickRelease(row)"
              >一键释放</el-button
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
      </el-table>

      <div
        v-show="total > 0"
        style="background-color: #fff; padding-bottom: 10px; margin-top: 10px"
      >
        <pagination
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <carStorageShift
      ref="carStorageShift"
      @success="refrehList"
    ></carStorageShift>

    <el-dialog
      title="冲突详情"
      :visible.sync="visible"
      width="30%"
      @close="visible = false"
    >
      <div>
        <p v-for="(item, index) in clashTimes" :key="index">
          {{ item }} 已被占用
        </p>
      </div>
    </el-dialog>

    <el-dialog title="使用须知" :visible.sync="dialogVisible" width="30%">
      <div style="font-size: 14px">
        1、开启OTA订单同步功能后，启用库存同步功能即可根据OTA平台订单对其他平台车辆进行自动库存占用及释放。<br />
        2、客户对本平台订单排车或获取到OTA平台订单已排车将自动占用其他平台车辆库存。续租后将自动新增库存占用;<br />
        3、客户取消订单后，自动释放各个平台库存;<br />
        4、为客户重新排车后，将自动释放上一车辆库存，占用重新排车的车辆库存;<br />
        5、提前还车则释放车辆原库存占用，新增整备时间库存占用;<br />
        6、建议在本平台录入所有车辆;<br />

        <span style="color: red; margin-top: 10px">
          注：自动同步库存目前支持订单排车、取消订单、重新排车、车辆续租、提前还车五种场景，逾期还车等场景暂不支持
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="canleSync">取 消</el-button>
        <el-button type="primary" @click="hanleOpenAuto">启 用</el-button>
      </span>
    </el-dialog>

    <el-dialog title="车型配置" :visible.sync="showCar" width="50%">
      <el-table
        :data="carList"
        style="width: 100%"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        border
      >
        <el-table-column
          prop="address"
          type="index"
          align="center"
          label="序号"
        >
        </el-table-column>
        <el-table-column align="center" label="品牌/车系/车型" min-width="180">
          <template v-slot="{ row }">
            {{ row.brandName }}/{{ row.seriesName }}/{{ row.modelName }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="是否启用自动同步库存"
          min-width="180"
        >
          <template v-slot="{ row }">
            <el-switch
              v-model="row.otaAutoCarSync"
              :active-value="1"
              :inactive-value="0"
              @change="updaeCarSync(row, $event)"
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="carTotal"
        :page.sync="carQueryParams.pageNum"
        :limit.sync="carQueryParams.pageSize"
        @pagination="getCarList"
      />
      <!--      <span slot="footer" class="dialog-footer">-->
      <!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
      <!--        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
      <!--      </span>-->
    </el-dialog>
  </div>
</template>
<script>
import carStorageShift from "./components/carStorageShift.vue";
import * as otaApi from "@/api/ota/ctrip";
import Template from "@/views/system/template";
import {
  autosyncCarList,
  getOtaAccountlist,
  updateAutosync,
} from "@/api/ota/ctrip";
import { otaOrderStatus } from "@/utils/filters";
export default {
  name: "OtaCarInventory",
  components: {
    Template,
    carStorageShift,
  },
  data() {
    return {
      tenantId: "",
      showCar: false,
      carList: [],
      tip:
        "\n" +
        "使用须知：\n" +
        "\n" +
        "取消\n" +
        "\n" +
        "确定启用\n" +
        "\n" +
        "1、开启OTA订单同步功能后，启用库存同步功能即可根据OTA平台订单对其他平台车辆进行自动库存占用及释放。\n" +
        "\n" +
        "2、客户对本平台订单排车或获取到OTA平台订单已排车，将自动占用其他平台车辆库存。续租后将自动新增库存占用\n" +
        "\n" +
        "3、客户取消订单后，自动释放各个平台库存\n" +
        "\n" +
        "4、为客户重新排车后，将自动释放上一车辆库存，占用重新排车的车辆库存\n" +
        "\n" +
        "5、提前还车则释放车辆原库存占用，新增整备时间库存占用\n" +
        "\n" +
        "6、建议在本平台录入所有车辆" +
        "\n" +
        "注：自动同步库存目前支持订单排车、取消订单、重新排车、车辆续租、提前还车五种场景，逾期还车等场景暂不支持",
      otaAutoCarSync: 0,
      dialogVisible: false,
      visible: false,
      daterange: [],
      // 加载标识
      loading: false,
      // 总条数
      total: 0,
      // 工单数据
      basicList: [],
      otaAccountMap: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        carLicenceNum: "", //车牌号
        orderEncryptId: "", //订单号
        startTime: "",
        endTime: "",
        requestSource: "PC",
        workOrderType: "", //工单类型
        workOrderStatus: "", //工单类型
      },
      clashTimes: [], //冲突时间
      carTotal: 0,
      carQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.getOtaAccountlist();
    this.getList();
    this.getTenantAutoSyncStatus();
    this.getCarList();
  },
  activated() {
    this.getList();
  },
  methods: {
    // 刷新工单列表
    refrehList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getOtaAccountlist() {
      otaApi.getOtaAccountlist().then((res) => {
        this.otaAccountMap = res.data;
      });
    },
    /** 查询工单列表 */
    getList() {
      this.loading = true;
      otaApi
        .getOTAWorkorder(this.queryParams)
        .then((res) => {
          this.basicList = res.rows;
          this.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    changeTime(e) {
      this.queryParams.startTime = e[0];
      this.queryParams.endTime = e[1];
      this.refrehList();
    },
    // 库存操作
    handleInventory(type) {
      this.$refs.carStorageShift.show(type);
    },
    // 一键释放
    handleQuickRelease(row) {
      otaApi.otaWorkorderQuickRelease(row.id).then((res) => {
        this.refrehList();
      });
    },
    // 查看详情
    handleDetail(status, remark) {
      console.log("状态", status);
      if (status == 4 && remark) {
        console.log(remark);
        this.clashTimes = remark.split(",");
        this.visible = true;
      }
    },
    // 搜索
    handleQuery() {
      this.refrehList();
    },
    // 重置
    resetQuery() {
      this.daterange = [];
      this.$refs.queryForm.resetFields();
      this.queryParams.startTime = "";
      this.queryParams.endTime = "";
      this.refrehList();
    },
    //车型配置列表
    getCarList() {
      otaApi.autosyncCarList(this.carQueryParams).then((res) => {
        this.carTotal = res.total;
        this.carList = res.rows;
      });
    },

    //获取租户全局自动占用/释放
    getTenantAutoSyncStatus() {
      otaApi.getTenantAutoSyncStatus().then((res) => {
        this.otaAutoCarSync = res.data.otaAutoCarSync;
        this.tenantId = res.data.id;
      });
    },

    //启用
    hanleOpenAuto() {
      this.dialogVisible = false;
      otaApi
        .updateTenantAutoSyncStatus({
          otaAutoCarSync: this.otaAutoCarSync,
          id: this.tenantId,
        })
        .then((res) => {
          this.otaAutoCarConfig();
        });
    },
    //取消
    canleSync() {
      this.otaAutoCarSync = 0;
      this.dialogVisible = false;
    },
    //全局自动启用/释放开关
    switchChange(value) {
      if (value == 1) {
        this.dialogVisible = true;
      } else {
        otaApi
          .updateTenantAutoSyncStatus({
            otaAutoCarSync: 0,
            id: this.tenantId,
          })
          .then((res) => {
            this.otaAutoCarConfig();
          });
      }
    },
    //单个车型启用/禁用状态
    updaeCarSync(row, value) {
      otaApi
        .updateAutosync({
          modelId: row.modelId,
          otaAutoCarSync: value,
        })
        .then((res) => {
          this.getCarList();
        });
    },
    statusType(type, status) {
      if (type === 1) {
        if (status === 0) {
          return "占用中";
        }
        if (
          status === 1 ||
          status === 4 ||
          status === 7 ||
          status === 8 ||
          status === 9 ||
          status === 10 ||
          status === 11
        ) {
          return otaOrderStatus(status);
        }
        if (status === 2) {
          return "占用成功";
        }
      }
      if (type === 2) {
        if (status === 6) {
          return "释放中";
        }
        if (
          status === 1 ||
          status === 5 ||
          status === 7 ||
          status === 9 ||
          status === 10 ||
          status === 11
        ) {
          return otaOrderStatus(status);
        }
        if (status === 3) {
          return "释放成功";
        }
      }
    },
    statusFlag(status) {
      if (status !== 0 && status !== 2 && status !== 3 && status !== 6) {
        return true;
      }
      return false;
    },
  },
};
</script>
<style lang="scss">
.active1 {
  color: #0f820f;
}

.active2 {
  color: #ff0000;
}
.rightBox {
  padding-right: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
